<template>
	<view class="container">
		<view class="search flex align-center">
			<u-search
				:focus="true"
				style="width: 100%;" 
				placeholder="请输入你想搜索的内容" 
				prefixIcon="search" 
				v-model="inputText"
			 @search="clickSearch" 
			 confirm-type="search" 
			 :show-action="false" 
			 maxlength="60">
			</u-search>
		</view>
		<scroll-view class="scroll" scroll-y :refresher-threshold="50" :refresher-background="'#FDFDFD'"
			:refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="refresherrefresh"
			@scrolltolower="loadMore">
			<view class="shop-list">
				<view class="shop-item" v-for="(item, index) in shopList" :key="index" @click="goShopDetail(item)">
					<view class="img">
						<image :src="item.pic[0]" mode="aspectFill"></image>
					</view>
					<view class="item">
						<view class="title1">
							<mp-html
								:tag-style="tagStyle"
								container-style="color: #333;font-style: 32rpx;font-weight: bold;"  
								:content="item.name">
							</mp-html>
						</view>
						<text class="title2">
							{{item.price == 0?'面议':'¥' + item.price}}
						</text>
						<text class="title3">
							{{item.serviceinfo.city}}丨{{item.serviceinfo.name}}
						</text>
					</view>
				</view>
				<uni-load-more v-if="shopList.length > 0" :status="shopStatus"></uni-load-more>
				<view v-if="shopList.length === 0" class="empty-wrap" >
				  <image class="empty-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
				  <text class="tips">暂无结果</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import serviceApi from "@/api/service.js"
	import { hightLightText } from "@/utils/utils.js"
	export default {
		data() {
			return {
				inputText: '',
				isRefreshing: false,
				shopPage: 1,
				shopPageSize: 10,
				//服务商品列表
				shopList: [],
				shopStatus: 'nomore',
				sortKey: 0,
				tagStyle: {
					em: 'font-style: normal;color: #fa3534;'
				}
			}
		},
		methods: {
			async clickSearch() {
				this.shopStatus = 'loading'
				uni.showLoading({
					title: '加载中'
				})
				let obj = {
					cate: "",
					keyword: this.inputText,
					page: this.shopPage,
					pagesize: this.shopPageSize,
					sort: this.sortKey
				}
				let res = await serviceApi.getShopList(obj) 
				if (res.code === 1) {
					let arr = []
					if (this.shopPage == 1) {
						this.shopList = []
					}
					let newList = res.data
					if (newList.length >= this.shopPageSize) {
						this.shopStatus = 'more'
					} else {
						this.shopStatus = 'nomore'
					}
					let arr1 = arr.concat(newList)
					arr1.forEach(val => {
						let obj = {
							id: val.id,
							name: hightLightText(val.name, this.inputText),
							pic: val.pic.split(','),
							price: val.price,
							serviceinfo: val.serviceinfo
						}
						this.shopList.push(obj)
					})
					this.isRefreshing = false
					uni.hideLoading()
				}else {
					this.$common.msgShow(res.msg)
				}
			},
			
			//下拉刷新
			refresherrefresh() {
				this.isRefreshing = true;
				this.shopPage = 1
				this.clickSearch()
			},
			
			//上拉加载
			loadMore() {
				if (this.shopStatus == 'more') {
					this.shopPage += 1
					this.clickSearch()
				}
			},
			
			//跳转服务商品详情
			goShopDetail(item) {
				uni.navigateTo({
					url: "/pagesShop/shopDetail/shopDetail?id=" + item.id 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  @import "serviceSearch.scss";
</style>
